<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .active {
            background: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="show(index)" :class="{active:currentIndex===index}"
            v-for="(item,index) in arr">{{item.btnName}}</button>
        <keep-alive include="component-b">
            <component :is="arr[currentIndex].componentName"></component>
        </keep-alive>
    </div>
</body>
<script>
    // 动态组件如过不加keep-alive 相对于每次都会销毁，诞生
    // 如果你需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用keep-alive组件包裹需要保存的组件
    var app = Vue.createApp({
        data() {
            return {
                arr: [
                    { btnName: '按钮1', componentName: 'component-a' },
                    { btnName: '按钮2', componentName: 'component-b' },
                    { btnName: '按钮3', componentName: 'component-c' }
                ],
                currentIndex: 0
            }
        },
        methods: {
            show(index) {
                this.currentIndex = index
            }
        },
    })

    // 创建了三个新的组件
    app.component('component-a', {
        name: 'component-a',
        template: `<div>我是内容1</div>`,
        // 对于keep-alive 组件来说，他拥有两个独有的生命周期钩子函数，
        // 分别为 activated 和 deactivated.
        activated() {
            console.log('进入')
        },
        // 用keep-alive包裹的组件在切换时不会进行销毁，
        // 而是缓存到内存中并执行 deactivated 钩子函数
        deactivated() {
            console.log('离开')
        }
    });
    // include - 字符串或正则表达式，只有名称匹配的组件会被缓存。
    // exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
    // max - 数字，最多可以火车多少组件实例
    app.component('component-b', {
        name: 'component-b',
        data() {
            return {
                msg: ''
            }
        },
        template:
            `<div>
                <p>我是内容2 --> <span>{{msg}}</span> </p>
                <input type='text' v-model='msg'>
            </div>`,
    });
    app.component('component-c', {
        name: 'component-c',
        data() {
            return {
                msg: ''
            }
        },
        template:
            `<div>
                <p> 我是内容3 --> <span>{{msg}}</span> </p>
                <input type='text' v-model='msg'>
            </div>`,
    });
    app.mount('#app')
</script>

</html>